<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>迁移图</title>
  <script include="proj4,mapv" src="./static/libs/include-openlayers-local.js"></script>
  <style>
    #map {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 100%;
    }
  </style>
</head>

<body>
  <div id="map"></div>
  <script>
    var map = new ol.Map({
      //地图容器div的ID
      target: 'map',
      //地图容器中加载的图层
      layers: [],
      //地图视图设置
      view: new ol.View({
        //地图初始中心点
        center: ol.proj.fromLonLat([110, 30]),
        //地图初始显示级别
        zoom: 2,
        //最小级别
        minZoom: 1,
        //最大级别
        maxZoom: 12
      })
    });

    map.addLayer(new ol.layer.Tile({
      source: new ol.source.TileImage({
        url: 'https://api.tiles.mapbox.com/v4/mapbox.dark/{z}/{x}/{y}.png?access_token=' +
          'sk.eyJ1IjoiY2hlbmdkYWRhIiwiYSI6ImNqZDFjaGo0ZjFzcnoyeG54enoxdnNuZHUifQ.hTWXXBUQ0wdGeuDF3GWeUw'
      })
    }))

    var randomCount = 1000;

    var data = [];

    var citys = ["北京", "天津", "上海", "重庆", "石家庄", "太原", "呼和浩特", "哈尔滨", "长春", "沈阳", "济南", "南京", "合肥", "杭州", "南昌", "福州",
      "郑州", "武汉", "长沙", "广州", "南宁", "西安", "银川", "兰州", "西宁", "乌鲁木齐", "成都", "贵阳", "昆明", "拉萨", "海口"
    ];

    // 构造数据
    while (randomCount--) {
      var cityCenter = mapv.utilCityCenter.getCenterByCityName(citys[parseInt(Math.random() * citys.length)]);
      data.push({
        geometry: {
          type: 'Point',
          coordinates: ol.proj.transform([cityCenter.lng, cityCenter.lat], 'EPSG:4326', 'EPSG:3857')
        },
        count: 30 * Math.random(),
        time: 100 * Math.random()
      });
    }

    var dataSet = new mapv.DataSet(data);

    var mapVOptions = {
      size: 13,
      gradient: {
        0.25: "rgb(0,0,255)",
        0.55: "rgb(0,255,0)",
        0.85: "yellow",
        1.0: "rgb(255,0,0)"
      },
      max: 60,
      draw: 'heatmap'
    }
    map.addLayer(
      new ol.layer.Image({
        source: new ol.source.Mapv({
          map: map,
          dataSet: dataSet,
          mapVOptions: mapVOptions
        })
      })
    );
  </script>


</body>

</html>